var CommentBox = React.createClass({
	getInitialState: function(){
		return {data:[]};
	},
	loadCommentsFromServer: function(){
		$.ajax({
	      url: '/api/comments',
	      dataType: 'json',
	      cache: false,
	      success: function(data) {
	        this.setState({data: data});
	      }.bind(this),
	      error: function(xhr, status, err) {
	        console.error('/api/comments', status, err.toString());
	      }.bind(this)
	    });
	},
	componentDidMount: function(){
		this.loadCommentsFromServer();
    	setInterval(this.loadCommentsFromServer, 5000);
	},
	handleCommentSubmit: function(comment){
		var comments = this.state.data;
	    var newComments = comments.concat([comment]);
	    this.setState({data: newComments});
		$.ajax({
	      url: '/api/comments',
	      dataType: 'json',
	      type: 'POST',
	      data: comment,
	      success: function(data) {
	        this.setState({data: data});
	      }.bind(this),
	      error: function(xhr, status, err) {
	        console.error('/api/comments', status, err.toString());
	      }.bind(this)
	    });
	},
	render: function(){
		return (
			<div className="commentBox">
				<h1>Comments</h1>
				<CommentList data={this.state.data}/>
				<CommentForm onCommentSubmit={this.handleCommentSubmit}/>
			</div>
		);
	}
});

var CommentList = React.createClass({
	render: function(){
		var commentNodes = this.props.data.map(function(comment){
			return (
		        <Comment author={comment.author}>
		            {comment.text}
		        </Comment>
		    );
		});
		return (
			<div className="commentList">
				{commentNodes}
			</div>
		);
	}
});

var Comment = React.createClass({
	rawMarkup: function() {
	    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
	    return { __html: rawMarkup };
	},
	render: function(){
		return (
			<div class="comment">
				<h2 className="commentAuthor">{this.props.author}</h2>
				<span dangerouslySetInnerHTML={this.rawMarkup()} />
			</div>
		);
	}
});

var CommentForm = React.createClass({
	handleSubmit: function(e){
		e.preventDefault();
		var author = this.refs.author.value.trim();
	    var text = this.refs.text.value.trim();
	    if (!text || !author) {
	      return;
	    }
	    this.props.onCommentSubmit({author: author, text: text});
	    this.refs.author.value = '';
	    this.refs.text.value = '';
	    return;
	},
	render: function(){
		return (
			<form className="commentForm" onSubmit={this.handleSubmit}>
		        <input type="text" placeholder="Your name" ref="author"/>
		        <input type="text" placeholder="Say something..." ref="text"/>
		        <input type="submit" value="Post" />
		    </form>
		);
	}
});

ReactDOM.render(
	<CommentBox/>, 
	document.getElementById('content'), 
	function(){
		console.log("render");
	}
);